<template>
  <div>
    <div class="draw-map" id="draw-map"></div>
    <el-collapse v-model="activeName">
      <el-collapse-item name="1">
        <template slot="title"> <span class="title"> 图层绘制 </span> </template>
        <el-row :gutter="10">
          <el-col :span="4">
            <el-select v-model="drawType" placeholder="请选择绘制类型" @change="handleTypeChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option> </el-select
          ></el-col>
          <el-col :span="14">
            <el-input
              v-model="drawParams"
              :placeholder="placeholder"
              @keyup.enter.native="handleDraw()"
            >
              <template slot="prepend">绘制参数：</template>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" round @click="handleDraw()">绘制</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="danger" round @click="handleClear()">清除</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h3>样式参数</h3>
            <div class="flex">
              <div class="flex">
                <h4>描边颜色：</h4>
                <el-color-picker v-model="strokeColor" show-alpha></el-color-picker>
              </div>
              <div class="flex">
                <h4>填充颜色：</h4>
                <el-color-picker v-model="fillColor" show-alpha></el-color-picker>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: "Draw",
  data() {
    return {
      map: null,
      activeName: ["1"],
      options: [
        { value: "point", label: "点", placeholder: "(一维数组)eg:[120,30]" },
        { value: "line", label: "线", placeholder: "(二维数组)eg:[[120,30],[121,31]]" },
        {
          value: "polygon",
          label: "面",
          placeholder: "(三维数组)eg:[[[120,30],[121,31],[122,32]]]",
        },
      ],
      drawType: "point",
      drawParams: "",
      strokeColor: "rgba(255, 255, 0, 1)",
      fillColor: "rgba(0, 255, 21, 0.5)",
    };
  },
  computed: {
    placeholder() {
      return this.options.find((item) => item.value === this.drawType).placeholder;
    },
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new this.ScreenMap();
      this.map.init("draw-map", [
        this.map.createBaseLayer("tdtImg"),
        this.map.createBaseLayer("tdtImgTxt"),
      ]);
    },

    handleTypeChange() {
      this.drawParams = "";
    },

    handleDraw() {
      this.map.removeLayers();
      let drawParams;
      try {
        drawParams = JSON.parse("[" + this.drawParams + "]");
      } catch (err) {
        this.$message.error("参数格式错误" + err);
        return;
      }
      let layer = null;
      let style = null;
      switch (this.drawType) {
        case "point":
          style = new this.map.Style({
            image: new this.map.Circle({
              radius: 10, // 设置圆的半径，默认为10
              fill: new this.map.Fill({
                color: this.fillColor, // 设置填充颜色，默认为黄色
              }),
              stroke: new this.map.Stroke({
                color: this.strokeColor, // 设置描边颜色，默认为黑色
                width: 2, // 设置描边宽度，默认为2
              }),
            }),
          });
          layer = this.map.createPointsLayer("point", drawParams, style);
          break;
        case "line":
          style = new this.map.Style({
            stroke: new this.map.Stroke({
              color: this.strokeColor, // 设置描边颜色，默认为粉红
              width: 3, // 设置描边宽度，默认为2
              lineCap: "round", //线帽样式
              //butt：末端添加平直边缘；round：末端添加圆形线帽；square：末端添加方形线帽；
              lineJoin: "round", //线条连接处样式
              //bevel：创建斜角；round：创建圆角；square：创建尖角；
            }),
          });
          layer = this.map.createLinesLayer("line", drawParams, style);
          break;
        case "polygon":
          style = new this.map.Style({
            fill: new this.map.Fill({
              color: this.fillColor, // 设置填充颜色，默认为黄色
            }),
            stroke: new this.map.Stroke({
              color: this.strokeColor, // 设置描边颜色，默认为粉红
              width: 3, // 设置描边宽度，默认为2
            }),
          });
          layer = this.map.createPolygonsLayer("polygon", drawParams, style);
          break;
      }
      this.map.addLayers([layer]);
    },

    handleClear() {
      this.drawParams = "";
      this.map.removeLayers();
    },
  },
};
</script>
<style lang="scss" scoped>
.draw-map {
  width: 100%;
  height: calc(100vh - 84px);
}

.flex {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

::v-deep {
  .el-collapse {
    position: absolute;
    top: 30px;
    left: 30px;
    transition: all 0.4s;

    .title {
      margin: 0 10px;
      font-size: 18px;
    }

    .el-collapse-item__content {
      padding: 10px;
    }
  }

  .el-select {
  }
}
</style>
